<template>
    <div>
        <div class="bg container box">
            <div class="title">{{ $route.name }}</div>
            <div class="inp">
                <input placeholder="请输入关键字" v-model="keyWord"/>
                <button @click="search"><i class="el-icon-search"></i> 搜 索</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            keyWord:""
        }
    },
    methods: {
        // 搜索
        search(){
            this.$emit("search",this.keyWord.trim())
        }
    },
}
</script>
<style scoped>
.bg {
    background-image: url("@/static/img/te.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
}

.box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.box .title {
    flex: 1;
    margin-left: 31px;
    height: 24px;
    font-size: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    text-align: left;
    color: #ffffff;
}

.box .inp {
    width: 445px;
    height: 40px;
    background: #f8f8f8;
    border-radius: 21px;
    display: flex;
    margin-right: 31px;

}

.box .inp input {
    border: none;
    width: 100%;
    border-radius: 21px;
    padding: 0 31px;
}

.box .inp input:focus {
    outline: none
}

.box .inp button {
    width: 105px;
    height: 40px;
    background: #2959b0;
    border-radius: 0px 20px 20px 0px;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}</style>